import React from 'react'
import FlipTimer from './FlipTimer'

class GiftProgress extends React.Component {
  constructor(props) {
    super(props)
    // pool_status 1 未开奖 2已开奖
    this.state = {
      ...this.initState(props.gift),
    }

  }

  initState(cur_gift) {
    let state = {
      flip_count: 0,
      is_waiting: false,
    }
    let diff = cur_gift.start_time + cur_gift.duration * 1000 - (this.props.currentTime || Date.now())
    if (diff > 0) {
      state.flip_count = Math.floor(diff / 1000)
    }
    if (state.flip_count <= 0) {
      state.is_waiting = true
    }
    return state
  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  onFlipTimeout() {
    this.setState({is_waiting: true})
  }

  clickClose() {
    this.props.onCloseGift && typeof this.props.onCloseGift === 'function' && this.props.onCloseGift()
  }

  onSelfJoin() {
    this.props.onJoinGift && typeof this.props.onJoinGift === 'function' && this.props.onJoinGift(this.props.gift)
  }

  renderFlip() {
    return this.state.flip_count ?
      <FlipTimer count={this.state.flip_count} onFlipTimeout={() => this.onFlipTimeout()}/> : null
  }

  renderPrize() {
    return this.props.gift.prizes.map((item, index) => {
      return (
        <div key={index} className="prize-item" style={{backgroundImage: `url(${item.prize.pic})`}}/>
      )
    })
  }

  renderContent() {
    if (this.state.is_waiting) {
      return (
        <div className="wait-result">
          <img className="wait-icon" src={require('../images/waiting_icon.gif')} alt=""/>
          <div className="wait-text">{this.props.language_data ? this.props.language_data.pc_stu_gift_title_wait_result : '等待抽奖结果'}</div>
        </div>
      )
    }
    return (
      <div className="pro-content">
        <div className="time-down-con">
          {this.renderFlip()}
        </div>
        <div className="prize-list">
          {this.renderPrize()}
        </div>
        {
          !this.props.gift.is_join && this.props.hasJoin ? (
            <div className="join-btn" onClick={() => this.onSelfJoin()}>
              {this.props.language_data ? this.props.language_data.pc_stu_gift_button_join : '猛戳参与'}
            </div>
          ) : (
            <div className="join-user">
              {this.props.language_data ? this.props.language_data.pc_stu_gift_text_has_join_prefix : '已有'} <span>{this.props.gift.join_number}</span> {this.props.language_data ? this.props.language_data.pc_stu_gift_text_has_join_suffix : '人参与抽奖'}
            </div>
          )
        }

      </div>
    )
  }

  render() {
    return (
      <div className={`gift-progress-mask ${this.props.platform || 'pc'}`}>
        <div className="mask-inner">
          <div className="gift_title">
            {this.props.language_data ? this.props.language_data.pc_stu_gift_title_progress : '抽奖啦！'}
            <div onClick={() => this.clickClose()} className="close-icon"/>
          </div>
          <div className="gift-content">
            {this.renderContent()}
          </div>
        </div>
      </div>
    )
  }
}

export default GiftProgress
